<!--
 * @Version: 0.0.1
 * @Author: wonderwhyy@live.com
 * @Date: 2020-10-07 14:44:38
-->
<!doctype html>
<html>
<head>
<meta http-equiv="Refresh" content="8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport"  content="width=device-witdh, initial-scale=1.0" />
<link rel=icon href=favicon.ico>
<title>The Bravest Coward.</title>
<link rel="stylesheet" href="./app.css">
</head>

<body>
    <div class="container">
        <div class="item">
            <div class="x1"></div>
            <div class="x2"></div>
            <div class="x3"></div>
            <div class="x4"></div>
            <div class="x5"></div>
        </div>
        <div class="item">
            <div class="x1"></div>
            <div class="x2"></div>
            <div class="x3"></div>
            <div class="x4"></div>
            <div class="x5"></div>
        </div>
        <div class="item">
            <div class="x1">大</div>
            <div class="x2">大</div>
            <div class="x3">大</div>
            <div class="x4">大</div>
            <div class="x5">大</div>
        </div>
        <div class="item">
            <div class="x1">家</div>
            <div class="x2">家</div>
            <div class="x3">家</div>
            <div class="x4">家</div>
            <div class="x5">家</div>
        </div>
        <div class="item">
            <div class="x1">好</div>
            <div class="x2">好</div>
            <div class="x3">好</div>
            <div class="x4">好</div>
            <div class="x5">好</div>
        </div>
        <div class="item">
            <div class="x1"></div>
            <div class="x2">我</div>
            <div class="x3">我</div>
            <div class="x4">我</div>
            <div class="x5">我</div>
        </div>
        <div class="item">
            <div class="x1"></div>
            <div class="x2"></div>
            <div class="x3">叫</div>
            <div class="x4">叫</div>
            <div class="x5">叫</div>
        </div>
        <div class="item">
            <div class="x1"></div>
            <div class="x2"></div>
            <div class="x3"></div>
            <div class="x4">王</div>
            <div class="x5">王</div>
        </div>
        <div class="item">
            <div class="x1"></div>
            <div class="x2"></div>
            <div class="x3"></div>
            <div class="x4">友</div>
            <div class="x5">友</div>
        </div>
        <div class="item">
            <div class="x1"></div>
            <div class="x2"></div>
            <div class="x3"></div>
            <div class="x4"></div>
            <div class="x5">义</div>
        </div>
        <div class="item">
            <div class="x1"></div>
            <div class="x2"></div>
            <div class="x3"></div>
            <div class="x4"></div>
            <div class="x5"></div>
        </div>
        <div class="item">
            <div class="x1"></div>
            <div class="x2"></div>
            <div class="x3"></div>
            <div class="x4"></div>
            <div class="x5"></div>
        </div>
    </div>
    
    <script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(".item").each(function(){
            let index = $(this).index();

            let start = 2.8;

            $(this).find(".x5").css("animation-delay", start + index / 8 + 's')

        });
    </script>
</body>
</html>
